@import url('https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');


body{
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
}


.mvc{
    display: flex;
    justify-content: center;
    align-items: center;    
}


h1 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    
    
}






#container-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    padding-top:20px;
    padding-bottom:20px;
    flex-wrap: wrap;
    
}

  .card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 100px;
    grid-template-areas: "image" "text" ;
    grid-auto-flow: column;
    border-radius: 18px;
    border: 2px solid #ff812c;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: 'poppins';
    text-align: center;
    margin: 20px;
    color: #ff812c;
    transition: 0.3s ease;
  }

  .card:hover {
      padding: 20px;
      color: white;
      border: 2px solid white;
      background-color: #ff812c;
  }

  .img {
    grid-area: image;
  }

  .text {
    grid-area: text;
  }

  .img {
    grid-area: image;
    background-image: url("../Photos/Our-Vision2.jpg");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
    padding: 0;
  }

  .img-2 {
    grid-area: image;
    background-image: url("../Photos/mission.jpg");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }

  .img-3 {
    grid-area: image;
    background-image: url("../Photos/core value.jpg");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }


.btn-more-abt-us{

    text-decoration: none;
    font-weight: 800;
    font-size: 2vh;
    color: #ff812c;
 
    border: 2px solid #ff812c;
    padding: 10px;
    transition: 0.3s ;

}

.btn-more-abt-us:hover {
    text-decoration: underline;
    background-color: #ff812c;
    color: white;
}
  
.container-cdg {
    color: #ff812c;
    padding-top: 50px ;
}

.cdg-tabs{
    
    
    margin: 50px;
    flex: 1 1 0;
    border-radius: 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    background-color: white;
    max-width: 350px;
    min-width: 250px;
    transition: 0.3s ease;
    border: 2px solid #ff812c;
  
}

.cdg-tabs:hover {
    padding: 20px;
    color: white;
    background-color: #ff812c;
}


.img-sec {
    width: 6vw;
    height: 12vh;
    border: 2px white solid;
    border-radius: 50%;
    padding: 1.5%;

}







  @media screen and (max-width:1000px) {

    .mvc {
        display: flex;
        flex-wrap: wrap;
    }
  
    
}

@media screen and (max-width:1330px) {
    .img-sec {
        width: 6vw;
        height: 10vh;
    }
}

@media screen and (max-width:1100px) {
    .img-sec {
        width: 6vw;
        height: 9vh;
    }
}

@media screen and (max-width:1000px) {
    .cdg-tabs:hover {
        padding: 10px;
        color: white;
        background-color: #ff812c;
    }
}

@media screen and (max-width:970px) {
    .img-sec {
        width: 9vw;
        height: 9vh;
        
    }

    
}

@media screen and (max-width:700px) {
    .img-sec {
        width: 10vw;
        height: 10vh;
    }
}

@media screen and (max-width:600px) {
    .img-sec {
        width: 13vw;
        height: 13vh;
    }
}

@media screen and (max-width:450px) {
    .img-sec {
        width: 18vw;
        height: 19vh;
        border: none;
    
       
    }
}